<template>
    <div>
     <h1>户型添加</h1>
     <table>
        <tr>
            <td>户型名称</td>
            <td><input type="text" v-model="data.hname"></td>
        </tr>
        <tr>
            <td>户型结构</td>
            <td>
                <select v-model="data.typeid">
                    <option value="0">请选择</option>
                    <option v-for="s in types" :value="s.typeid">{{s.typename}}</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>建筑面积</td>
            <td><input type="text" v-model="data.hmianji"></td>
        </tr>
        <tr>
            <td>套内面积</td>
            <td><input type="text" v-model="data.htaoji"></td>
        </tr>
        <tr>
            <td>图片</td>
            <td>
                <input type="file" @change="upload">
                <img style="height: 100px; width: 100px;" :src="'https://localhost:7131'+data.himg">
            </td>
        </tr>
        <tr>
            <td>状态</td>
            <td><input type="checkbox" v-model="data.hsates">选中代表true</td>
        </tr>
       
        <tr>
            <td></td>
            <td><input type="button" value="提交" @click="Add"></td>
        </tr>
     </table>
    </div>
</template>

<script setup lang="ts">
import router from '@/router';
import axios from 'axios';
import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';

const data=ref({
    "hid": 0,
  "hname": "",
  "typeid": 0,
  "hmianji": 0,
  "htaoji": 0,
  "himg": "string",
  "hsates": true
})
const upload=(a:any)=>
{
var f=a.target.files[0]
var fd=new FormData();
fd.append("file",f);

if(f.size>1*1024*1024)
{
    alert("图片大小不能超过1MB");
    return;
}
if(f.type!="image/png"&&f.type!="image/jpeg")
{
    alert("图片类型只能是jpg或img");
    return;
}
axios.post("https://localhost:7131/api/upload/upload",fd).then(res=>
{
    data.value.himg=res.data;
}
)
}

const types=ref([{
    "typeid": 0,
    "typename": ""
    }])

    onMounted(()=>
{
    Getdata();
})

const Getdata=()=>
{
    axios.get("https://localhost:7131/api/type/xia").then(res=>
        {
            types.value=res.data;
        }
    )
}

const Add=()=>
{

    if(data.value.hname=="")
{
    alert("户型名称不能为空");
    return;
}
if(data.value.typeid==0)
{
    alert("户型结构不能为空");
    return;
}
if(data.value.hmianji==0)
{
    alert("建筑面积不能为空");
    return;
}
if(data.value.htaoji==0)
{
    alert("套内面积不能为空");
    return;
}

if(data.value.hmianji<60)
{
    alert("建筑面积不得小于60");
    return;
}
if(data.value.hmianji>300)
{
    alert("建筑面积不得大于300");
    return;
}
if(data.value.htaoji>=data.value.hmianji)
{
    alert("套内面积必须小于建筑面积");
  return;
}


axios.post("https://localhost:7131/api/hotel/Add",data.value).then(res=>
{
    if(res.data>0)
{
    alert("添加成功");
    router.push({path:"/App"});
    return;

}
else{
    alert("添加失败");
}
}
)
}

</script>

<style scoped>

</style>